﻿@page
@{ Layout = "_Layout"; }
@section Styles{
  <link rel="stylesheet" href="/sitefiles/assets/lib/ueditor/third-party/custom/custom.css">
  <style>
    html, body {
      height: 100%;
      overflow: hidden;
    }
    .el-tag {
      height: auto;
      white-space: inherit;
      margin-bottom: 5px;
      margin-right: 5px;
    }
    .cover-uploader {
      border-color: #00B19D;
    }
    .cover-uploader {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      width: 120px;
    }
    .cover-uploader:hover {
      border-color: #409EFF;
    }
    .cover-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 120px;
      height: 120px;
      line-height: 120px;
      text-align: center;
    }
    .cover {
      width: 120px;
      height: 120px;
      display: block;
    }
    .el-icon-picture-outline {
      font-size: 22px;
      margin: 100px 0;
      color: #c0c4cc;
    }
    .scrollbar .el-textarea textarea {
      height: 120px;
    }

    .aside .thumb {
      padding: 10px;
    }
    .aside .thumb .cover {
      cursor: pointer; 
      position: relative; 
      height:150px; 
      width: 100%;
      background-size: cover;
      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-color: #f6f8f9;
    }

    .aside .thumb .cover .text {
      position: absolute;
      bottom: 0;
      text-align: center;
      display: block;
      width: 226px;
      color: #fff;
      padding: 6px;
      background-color: #999;;
    }

    .aside .list {
      padding: 10px;
      cursor: pointer;
    }
    .aside .thumb:hover, .aside .active, .aside .list:hover {
      background: rgb(225, 243, 216);
    }
    .aside .list .text {
      font-size: 14px;
      height: 38px;
      overflow: hidden;
    }
    .el-card__body {
      padding: 10px;
    }
    .el-menu {
      border-right: 0;
    }
  </style>
}

<el-container style="padding-top: 0; padding-bottom: 0; overflow:hidden;" :style="{height: mainHeight}">
  
  <el-aside class="aside" width="280px">
    <el-scrollbar class="scrollbar" :style="{height: mainHeight}">

      <el-card>
        <template v-for="(item, index) in items" :key="index">
          <el-popover
            v-if="index === 0"
            placement="right"
            width="150"
            trigger="hover">
            <el-menu
              v-on:select="btnMenuSelect"
              class="el-menu-vertical-demo">
              <el-menu-item :index="'select:' + index">
                <i class="el-icon-menu"></i>
                <span slot="title">选择图文</span>
              </el-menu-item>
              <el-menu-item :index="'down:' + index">
                <i class="el-icon-bottom"></i>
                <span slot="title">下 降</span>
              </el-menu-item>
            </el-menu>

            <div slot="reference" v-on:click="btnItemClick(item)" class="thumb" :class="{active: item === form}">
              <div class="cover" :style="{backgroundImage: 'url(' + item.thumbUrl + ')'}">
                <div class="text">{{(item.title || '标题')}}</div>
              </div>
            </div>
          </el-popover>

          <el-popover
            v-else
            placement="right"
            width="150"
            trigger="hover">
            <el-menu
              v-on:select="btnMenuSelect"
              class="el-menu-vertical-demo">
              <el-menu-item :index="'select:' + index">
                <i class="el-icon-menu"></i>
                <span slot="title">选择图文</span>
              </el-menu-item>
              <el-menu-item :index="'up:' + index">
                <i class="el-icon-top"></i>
                <span slot="title">上 升</span>
              </el-menu-item>
              <el-menu-item v-if="items.length !== index + 1" :index="'down:' + index">
                <i class="el-icon-bottom"></i>
                <span slot="title">下 降</span>
              </el-menu-item>
              <el-menu-item :index="'delete:' + index">
                <i class="el-icon-delete"></i>
                <span slot="title">删 除</span>
              </el-menu-item>
            </el-menu>
            
            <div slot="reference" v-on:click="btnItemClick(item)" class="list" :class="{active: item === form}">
              <el-row>
                <el-col span="18">
                  <div class="text">{{item.title}} {{item.index}}</div>
                </el-col>
                <el-col span="6">
                  <el-image 
                    fit="cover"
                    style="width: 55px; height: 55px"
                    :src="item.thumbUrl">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline" style="margin: 0px; font-size: 36px; color: #999; background: #fff; padding: 5px;"></i>
                    </div>
                  </el-image>
                </el-col>
              </el-row>
            </div>
          </el-popover>
          
          <el-divider></el-divider>
        </template>
  
        <el-row style="text-align: center; padding: 10px">
  
          <el-dropdown v-on:command="btnAddClick">
            <el-button size="small" plain type="primary">
              <i class="el-icon-plus"></i>
              新建消息
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="new">图文消息</el-dropdown-item>
              <el-dropdown-item command="select">选择图文</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
  
        </el-row>
      </el-card>

    </el-scrollbar>
  </el-aside>
  
  <el-main style="padding: 0; margin: 0">
    <el-scrollbar class="scrollbar" :style="{height: mainHeight}">

      <el-form v-on:submit.native.prevent style="margin: 10px 20px 20px 10px" ref="form" :model="form" size="small" status-icon label-width="100px">
        <el-form-item label="标题" prop="title" :rules="{ required: true, message: '请输入标题' }">
          <el-input
            v-model="form.title"
            size="small"
            placeholder="请输入标题">
          </el-input>
        </el-form-item>
        <el-form-item label="正文" prop="content" :rules="{ required: true, message: '请输入正文' }">
          <el-button-group style="margin-bottom: 2px;">
            <el-button size="mini" type="info" plain v-on:click="btnLayerClick({title: '导入Word', name: 'Word', attributeName: 'editor'})">
              导入Word
            </el-button>
            <el-button size="mini" type="info" plain v-on:click="btnLayerClick({title: '插入图片', name: 'Image', attributeName: 'editor'})">
              插入图片
            </el-button>
            <el-button size="mini" type="info" plain v-on:click="btnLayerClick({title: '插入视频', name: 'Video', attributeName: 'editor'})">
              插入视频
            </el-button>
            <el-button size="mini" type="info" plain v-on:click="btnLayerClick({title: '插入音频', name: 'Audio', attributeName: 'editor'})">
              插入音频
            </el-button>
            <el-button size="mini" type="info" plain v-on:click="btnLayerClick({title: '插入附件', name: 'File', attributeName: 'editor'})">
              插入附件
            </el-button>
          </el-button-group>
          <textarea
            id="editor"
            name="editor"
            v-html="form.content"
            style="width: 100%;">
          </textarea>
        </el-form-item>
        <el-form-item label="封面和摘要">
          <el-row>
            <el-col span="4">
              <el-link
                class="cover-uploader"
                :underline="false"
                v-on:click="btnUploadClick">
                <el-image 
                  v-if="form.thumbUrl"
                  class="cover"
                  :src="form.thumbUrl">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-plus cover-uploader-icon"></i>
                  </div>
                </el-image>
                <i v-else class="el-icon-plus cover-uploader-icon"></i>
              </el-link>
            </el-col>
            <el-col span="20">
              <el-form-item>
                <el-input
                  type="textarea"
                  style="height: 120px;"
                  placeholder="请输入内容摘要"
                  v-model="form.digest">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="作者">
          <el-input
            v-model="form.author"
            size="small"
            placeholder="请输入作者">
          </el-input>
        </el-form-item>
        <el-form-item label="原文链接" prop="contentSourceUrl" :rules="{ type: 'url', message: '链接不合法' }">
          <el-input
            v-model="form.contentSourceUrl"
            size="small"
            placeholder="请输入原文链接">
          </el-input>
        </el-form-item>
        <el-form-item label="留言" prop="commentType" :rules="{ required: true, message: '请选择留言类型' }">
          <el-radio-group v-model="form.commentType">
            <el-radio v-for="commentType in commentTypes" :label="commentType.value">{{commentType.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

    </el-scrollbar>
  </el-main>
  
</el-container>

<el-divider></el-divider>

<el-row align="center" style="text-align: center; padding-top:4px">
  <el-button size="medium" v-on:click="btnSubmitClick" type="primary">保 存</el-button>
  <el-button v-if="siteType === 'wx'" size="medium" v-on:click="btnPreviewClick" type="default">预 览</el-button>
  <el-button v-if="siteType === 'wx'" size="medium" v-on:click="btnSendClick" type="default">保存并群发</el-button>
  <el-button size="medium" v-on:click="btnCloseClick" type="default">关 闭</el-button>
</el-row>

<el-dialog
  title="发送预览"
  :visible.sync="previewDialog"
  width="60%"
  center>

  <el-form v-on:submit.native.prevent ref="previewForm" :model="previewForm" label-position="top" size="small">
    <el-form-item label="微信号(关注公众号后，才能接收图文消息预览)" prop="wxNames" :rules="{ required: true, message: '请输入微信号' }">
      <el-input
        type="textarea"
        :rows="wxNamesCount"
        v-model="previewForm.wxNames"
        placeholder="可输入多个微信号，按回车键分割"></el-input>
    </el-form-item>
  </el-form>
  <div class="tips">预览功能仅用于公众号查看文章效果，不适用于公众传播，预览链接会在短期内失效</div>

  <span slot="footer" class="dialog-footer">
    <el-button size="small" type="primary" v-on:click="btnPreviewSubmitClick">确 定</el-button>
    <el-button size="small" v-on:click="previewDialog = false">取 消</el-button>
  </span>
</el-dialog>

@section Scripts{
  <script src="/sitefiles/assets/lib/ueditor/editor_config.js" type="text/javascript" ></script>
  <script src="/sitefiles/assets/lib/ueditor/ueditor.all.js" type="text/javascript"></script>
  <script src="/sitefiles/assets/lib/ueditor/third-party/custom/custom.js" type="text/javascript"></script>
  <script src="/sitefiles/assets/js/admin/cms/materialEditor.js" type="text/javascript"></script>
}